<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialogTitle"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form
      ref="dataForm"
      :model="entity"
      :disabled="operation == 3"
      label-suffix="："
      label-width="auto"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            prop="parentId"
            label="父菜单"
            :rules="{
              required: true,
              message: '请选择父菜单',
              trigger: 'blur',
            }"
          >
            <el-tree-select
              v-model="entity.parentId"
              :data="menus"
              :props="menuProps"
              check-strictly
              value-key="id"
              filterable
              clearable
              placeholder="请选择父菜单"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            prop="menuName"
            label="名称"
            :rules="{ required: true, message: '请输入名称', trigger: 'blur' }"
          >
            <el-input
              v-model="entity.menuName"
              placeholder="请输入名称"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            prop="menuType"
            label="菜单类型"
            :rules="{
              required: true,
              message: '请选择菜单类型',
              trigger: 'blur',
            }"
          >
            <el-radio-group v-model="entity.menuType">
              <el-radio
                v-for="type in menuType"
                :key="type.value"
                :label="type.value"
                :value="type.value"
                >{{ type.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            prop="menuPermission"
            label="权限"
            :rules="{
              required: entity.menuType != 'CATALOG',
              message: '请输入展示权限',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="entity.menuPermission"
              placeholder="请输入权限"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col v-if="entity.menuType == 'MENU'" :span="12">
          <el-form-item
            prop="menuPage"
            label="展示页面"
            :rules="{
              required: true,
              message: '请输入展示页面',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="entity.menuPage"
              placeholder="请输入展示页面"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col
          v-if="entity.menuType == 'MENU' || entity.menuType == 'CATALOG'"
          :span="12"
        >
          <el-form-item prop="menuIcon" label="图标">
            <el-input
              v-model="entity.menuIcon"
              placeholder="请输入图标"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col v-if="entity.menuType != 'AUTHORITY'" :span="12">
          <el-form-item prop="menuOrder" label="排序">
            <el-input
              v-model="entity.menuOrder"
              placeholder="请输入排序"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col v-if="entity.menuType == 'MENU'" :span="24">
          <el-form-item prop="menuBadgeApi" label="徽章API">
            <el-input
              v-model="entity.menuBadgeApi"
              placeholder="请输入菜单徽章接口地址"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
      <save-button
        v-if="operation != 3"
        :loading="loading"
        @click="saveHandler"
      />
    </template>
  </el-dialog>
</template>
<script>
import { fetchTree, save, update } from '@/api/upms/menu'
import { menuType } from '@/config/dictionary'

export default {
  name: 'MenuEdit',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  emits: ['success'],
  data() {
    return {
      loading: false,
      entity: {},
      titleMap: {
        1: '新建菜单',
        2: '编辑菜单',
        3: '查看菜单',
      },
      menus: [],
      menuProps: {
        value: 'id',
        label: 'menuName',
      },
    }
  },
  computed: {
    operation() {
      return this.dialog.operation
    },
    dialogTitle() {
      return this.titleMap[this.dialog.operation]
    },
    menuType() {
      return menuType
    },
  },
  methods: {
    openHandler() {
      this.entity = Object.assign(
        {
          parentId: null,
          menuButton: false,
          menuType: 'MENU',
        },
        this.dialog.entity
      )
      this.fetchTree()
    },
    fetchTree() {
      fetchTree().then((res) => {
        this.menus = res.data.data
        this.menus.unshift({
          id: 0,
          menuName: '无',
        })
      })
    },
    closeHandler() {
      this.entity = {}
      this.$refs.dataForm.clearValidate()
    },
    saveHandler() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          let edit = this.operation == 1 ? save : update
          edit(this.entity)
            .then(() => {
              this.dialog.visible = false
              this.$message.success('保存成功')
              this.$emit('success')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>
